<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI助手</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="app-container">
        <!-- 左侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h1 class="app-title">AI助手</h1>
            </div>
            
            <div class="sidebar-content">
                <!-- 新建对话按钮 -->
                <button class="new-chat-btn">
                    <i class="fas fa-plus"></i>
                    新建对话
                </button>
                
                <!-- 聊天记录 -->
                <div class="chat-history">
                    <h3>聊天记录</h3>
                    <div class="history-list" id="historyList">
                        <div class="no-history">暂无聊天记录</div>
                    </div>
                </div>
            </div>
            
            <!-- 底部状态和记忆管理 -->
            <div class="sidebar-footer">
                <div class="status">
                    <span class="status-indicator online"></span>
                    在线
                </div>
                
                <!-- 记忆管理 -->
                <div class="memory-management">
                    <h3>记忆管理</h3>
                    <div class="memory-controls">
                        <button class="memory-btn view-memory">
                            <i class="fas fa-eye"></i>
                            查看记忆
                        </button>
                        <button class="memory-btn clear-memory">
                            <i class="fas fa-trash"></i>
                            清空记忆
                        </button>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 左侧医生形象展示区域 -->
            <div class="doctor-section">
                <div class="doctor-avatar">
                    <i class="fas fa-user-md"></i>
                </div>
                <h2>欢迎使用AI助手</h2>
                <p>我是您的专属AI助手，为您提供专业的智能咨询服务</p>
                <div class="online-status">
                    <span class="status-dot"></span>
                    在线
                </div>
            </div>

            <!-- 右侧聊天交互区域 -->
            <div class="chat-section">
                <div class="chat-messages" id="chatMessages">
                    <!-- AI的欢迎消息 -->
                    <div class="message ai-message">
                        <div class="message-avatar">
                            <i class="fas fa-user-md"></i>
                        </div>
                        <div class="message-content">
                            <div class="message-text">
                                <p>Hi, 你好</p>
                                <p>我是你的AI助手,有什么可以帮助你的吗?</p>
                            </div>
                            <div class="message-time">刚刚</div>
                        </div>
                    </div>
                </div>

                <!-- 输入区域 -->
                <div class="chat-input-area">
                    <div class="input-container">
                        <textarea 
                            class="chat-input" 
                            placeholder="和AI说点什么..."
                            id="messageInput"
                            rows="1"
                        ></textarea>
                        <button class="send-btn" id="sendBtn">
                            <i class="fas fa-paper-plane"></i>
                            发送
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="api.js"></script>
    <script src="script.js"></script>
</body>
</html> 